<template>
	<view class="share">
		<view :class="{ 'share-box': shareState }" @click="handleHiddenShare"></view>
		<view class="share-item" :class="{ 'share-show': shareState }">
			<view class="share-to">
				<view class="left"></view>
				<view class="center">分享</view>
				<view class="right"></view>
			</view>
			<view class="content">
				<view class="block" v-for="(item, index) in shareList" :key="index" @click="toShare(index)">
					<image :src="item.image" mode="aspectFill"></image>
					<text style="font-weight: 800;">{{ item.content }}</text>
				</view>
			</view>
			<!-- <view class="cancel" @click.stop="handleHiddenShare"><text>取消</text></view> -->
		</view>
	</view>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			shareList: [{ image: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/zwnl/5.png', content: '分享小程序' }, { image: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/zwnl/7.png', content: '申请设备' }],
			shareState: true
		};
	},
	methods: {
		toShare(index) {
			console.log(index);
			if (index == 0) {
				uni.navigateTo({
					url: '/pages/main/childPages/inviteCode'
				});
			}
			if (index == 1) {
				uni.navigateTo({
					url: '/activePages/pages/index_share/index_share'
				});
			}
		},
		// 显示分享
		handleShowShare() {
			this.shareState = true;
		},
		// 隐藏分享
		handleHiddenShare() {
			this.shareState = false;
			uni.switchTab({
				url: '/pages/main/homePages'
			});
		}
	}
};
</script>

<style lang="less">
.share {
	width: 100%;
	height: 100%;
	// background-size: 700upx 500upx;
}
.share-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.3s;
	z-index: 999;
}
// 进入分享动画
.share-show {
	transition: all 0.3s ease;
	transform: translateY(0%) !important;
}
// 离开分享动画
.share-item {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	color: #aaaaaa;
	transition: all 0.3s ease;
	transform: translateY(100%);
	z-index: 1999;
	.share-to {
		// width:100%;
		height: 3rem;
		display: flex;
		justify-content: space-between;
		line-height: 3rem;
		margin-left: 40rpx;
		margin-right: 40rpx;
		.left {
			height: 1rpx;
			background-color: #e4e7ed;
			width: 200rpx;
			margin-top: 60rpx;
		}
		.center {
			height: 0rpx;
			background-color: #1c0519;
			position: absolute;
			top: 40rpx;
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			font-family: Georgia, 'Times New Roman', Times, serif;
			border: none;
			color: #fe5a73;
		}
		.right {
			height: 1rpx;
			background-color: #e4e7ed;
			width: 200rpx;
			margin-top: 60rpx;
		}
	}
	.content {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		.block {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 180rpx;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			text {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #AAAAAA;
			}
		}
	}
	.cancel {
		width: 100%;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #e4e7ed;
		color: #aaaaaa;
	}
}
</style>
